<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>popupmenu</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type"
			content="text/html; charset=ISO-8859-1">

		<link rel="stylesheet" type="text/css" href="css/demo.css">
		<link rel="stylesheet" type="text/css" href="js/ui_zk/css/base.css">
		<link rel="stylesheet" type="text/css" href="js/ui_zk/css/tree.css">

		<script type="text/javascript" src="js/ui_zk/zk.base.js"></script>
		<script type="text/javascript" src="js/ui_zk/zk.popupmenu.js"></script>
		<script type="text/javascript">
			zk.ok(function(){
				//return;
				zk.console=zk.get("logs");	
				
				document.body.oncontextmenu = function(){
					var e;
					if (zk.browser.msie){
						e=window.event;
					}else{
						e=arguments[0];
					}
					
					if (!window.contmenu){
						window.contmenu=new zk.PopupMenu();
						zk.oe(window.contmenu,'click',function(e,data){zk.log(data.item.caption +' clicked');});
					}
					window.contmenu.removeitemAll();
					var item = new zk.MenuItem({text:'1',iconCls:'demoicon'});
					zk.oe(item,'click',function(e){
						alert('click');
					});
					window.contmenu.additem(item);
					
					//add item dynamicly
					item = new zk.MenuItem({text:'2'});
					zk.oe(item,'show',function(e){
						var it=e.src;
						it.removeitemAll();
						for (var i=0; i<5 ; i++){
							it.additem(new zk.MenuItem({text:('ok this is sub menu,text is long enough: 2.'+i)}));
							if (2==i){it.seperate();}
						}						
					});
					//note:you should add the item to the menu before adding sub-item to this item
					window.contmenu.additem(item);					
					item.additem(new zk.MenuItem({text:('loading...')}));		
					
					//seperate
					window.contmenu.seperate();
					
					item = new zk.MenuItem({text:'3',icon:'images/save.gif'});
					window.contmenu.additem(item);
					
					item = new zk.MenuItem({text:'4'});
					window.contmenu.additem(item);
					item.setEnable(false);
					
					window.contmenu.show({event:e});
					
					return false;	
				};
			});
		</script>
	</head>

	<body>
		
		events for normal:
		<textarea id='logs' rows="20" cols="50"></textarea>
	</body>
</html>
